<template>
    <div class="editor">
        <div class="editorheader">
            <Button class="cancel">取消</Button>
            <Button class="publish" @click="getContent">发布</Button>
        </div>
        <Input v-model="title" style="width: 100%" placeholder="这里输入标题"/>
        <div id="editor" style="height: 100vw">
            <p>在这里</p>
            <p>开始你的创作吧 ^_^</p>
        </div>
    </div>
</template>

<script>
    import Quill from 'quill';
    import 'quill/dist/quill.snow.css';

    export default {
        name: 'publish',
        data() {
            return {
                quill: {},
                title: ''
            };
        },
        methods: {
            getContent() {
                const content = this.quill.container.firstChild.innerHTML;
                console.log(content);
            }
        },
        mounted() {
            const toolbarOptions = [
                [{header: [1, 2, 3, 4, 5, 6, false]}],
                ['bold'], // toggled buttons
                ['blockquote', 'code-block'],
                ['clean']
            ];
            this.quill = new Quill('#editor', {
                modules: {
                    toolbar: toolbarOptions
                },
                theme: 'snow'
            });
        }
    };
</script>

<style lang="scss">
    .editor {
        .editorheader {
            top: 0px;
            height: 44px;
            background: rgb(253, 163, 62);
            button {
                background: white;
                color: rgb(253, 163, 62);
                height: 35px;
            }
            display: flex;
            align-items: center;
            justify-content: space-around;
            text-align: center;
        }
        input {
            border-radius: 0;
            height: 45px;
            text-align: center;
            font-size: 15px;
        }
    }
</style>
